<template>
  <div class="container">
    <header>
      <!-- <img src="images/banner4.png"> -->
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div v-for="(item,index) in houseInfo.albumList" :key="index" class="swiper-slide">
            <img :src="item.imgPath" />
          </div>
        </div>
      </div>
      <!-- 悬浮按钮 -->
      <a class="down" href="javascript:window.history.back()">
        <span class="icon">&#xe63f;</span>
      </a>
      <a class="collection" href="#">
        <span class="icon">&#xe639;</span>
      </a>
      <a class="share" href="#">
        <span class="icon">&#xe607;</span>
      </a>
      <p class="num"></p>
    </header>
    <div class="top">
      <h1>{{houseInfo.name}}</h1>
      <h3>{{houseInfo.desc}}</h3>
      <p>
        <span>{{houseInfo.rentMoney}}</span>
        <span>元/月</span>
        <span>服务费:{{houseInfo.serviceFee}}元</span>
      </p>
    </div>
    <section class="content">
      <h1>基本信息</h1>
      <div class="info">
        <dl>
          <dt>入住</dt>
          <dd>{{houseInfo.baseInfo.live}}</dd>
          <dt>面积</dt>
          <dd>{{houseInfo.baseInfo.area}}</dd>
          <dt>户型</dt>
          <dd>{{houseInfo.baseInfo.model}}</dd>
          <dt>发布</dt>
          <dd>{{houseInfo.baseInfo.pubtime}}</dd>
          <dt>楼层</dt>
          <dd>{{houseInfo.baseInfo.floor}}</dd>
          <dt>装修</dt>
          <dd>{{houseInfo.baseInfo.decorate}}</dd>
          <dt>车位</dt>
          <dd>{{houseInfo.baseInfo.stall}}</dd>
          <dt>付款</dt>
          <dd>{{houseInfo.baseInfo.payment}}</dd>
          <dt>小区</dt>
          <dd>{{houseInfo.baseInfo.plot}}</dd>
        </dl>
        <p>
          <a href="#">查看小区</a>
        </p>
      </div>
      <h1>配套设施</h1>
      <ul class="facilities">
        <li :class="houseInfo.facility.bed==='false'?'none':''">
          <span class="icon">&#xe60c;</span>
          <p>床</p>
        </li>
        <li :class="houseInfo.facility.washer==='false'?'none':''">
          <span class="icon">&#xec78;</span>
          <p>洗衣机</p>
        </li>
        <li :class="houseInfo.facility.refrigerator==='false'?'none':''">
          <span class="icon">&#xe90b;</span>
          <p>冰箱</p>
        </li>
        <li :class="houseInfo.facility.conditioner==='false'?'none':''">
          <span class="icon">&#xe60e;</span>
          <p>空调</p>
        </li>
        <li :class="houseInfo.facility.wifi==='false'?'none':''">
          <span class="icon">&#xe6a4;</span>
          <p>wifi</p>
        </li>
        <li :class="houseInfo.facility.sofa==='false'?'none':''">
          <span class="icon">&#xe724;</span>
          <p>沙发</p>
        </li>
        <li :class="houseInfo.facility.tablesChair==='false'?'none':''">
          <span class="icon">&#xe666;</span>
          <p>桌椅</p>
        </li>
        <li :class="houseInfo.facility.tv==='false'?'none':''">
          <span class="icon">&#xe67d;</span>
          <p>电视</p>
        </li>
        <li :class="houseInfo.facility.calorifier==='false'?'none':''">
          <span class="icon">&#xe67f;</span>
          <p>热水器</p>
        </li>
        <li :class="houseInfo.facility.cook==='false'?'none':''">
          <span class="icon">&#xe60d;</span>
          <p>可做饭</p>
        </li>
        <li :class="houseInfo.facility.heating==='false'?'none':''">
          <span class="icon">&#xe90d;</span>
          <p>暖气</p>
        </li>
        <li :class="houseInfo.facility.balcony==='false'?'none':''">
          <span class="icon">&#xe622;</span>
          <p>阳台</p>
        </li>
      </ul>
      <h1>附近位置</h1>
      <!-- <img src="images/4.jpg"> -->
      <div class="map" id="allmap" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0"></div>
      <h1>附近房源</h1>
      <ul class="case">
        <li>
          <a href="homedetails.html">
            <img src="images/5.jpg" class="fl" />
            <div class="text fr">
              <h1>包图软件园二期押一付三</h1>
              <p>套二 50m2 距包图大道地铁站1 .2km</p>
              <ul>
                <li class="active">在线签约</li>
                <li>近地铁</li>
                <li>精装修</li>
              </ul>
              <p>
                2100
                <span>元/月</span>
              </p>
            </div>
          </a>
        </li>
        <li>
          <a href="homedetails.html">
            <img src="images/5.jpg" class="fl" />
            <div class="text fr">
              <h1>包图软件园二期押一付三</h1>
              <p>套二 50m2 距包图大道地铁站1 .2km</p>
              <ul>
                <li class="active">在线签约</li>
                <li>近地铁</li>
                <li>精装修</li>
              </ul>
              <p>
                2100
                <span>元/月</span>
              </p>
            </div>
          </a>
        </li>
        <li>
          <a href="homedetails.html">
            <img src="images/5.jpg" class="fl" />
            <div class="text fr">
              <h1>包图软件园二期押一付三</h1>
              <p>套二 50m2 距包图大道地铁站1 .2km</p>
              <ul>
                <li class="active">在线签约</li>
                <li>近地铁</li>
                <li>精装修</li>
              </ul>
              <p>
                2100
                <span>元/月</span>
              </p>
            </div>
          </a>
        </li>
      </ul>
    </section>
    <footer>
      <div class="left">
        <img class="fl" src="images/touxiang.png" alt />
        <p class="fl">包图君</p>
        <span>个人</span>
      </div>
      <div class="phone">
        <a href="tel:+1581380942">电话咨询</a>
      </div>
      <div class="right">
        <router-link :to="{name:'point',query:{hid:houseInfo.hid}}">立即预约</router-link>
      </div>
      <div class="clear"></div>
    </footer>
  </div>
</template>

<script>
import { getBestHouse } from "../network/index.js";
export default {
  name: "detail",
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".num",
          type: "fraction",
        },
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
      houseInfo: {
        facility: {},
        baseInfo: {},
      },
      bestHouseAll: [],
    };
  },
  methods: {
    map() {
      var map = new window.BMap.Map("allmap");
      var point = new window.BMap.Point(116.331398, 39.897445);
      map.centerAndZoom(point, 12);
      // window.map = map;
      var geolocation = new window.BMap.Geolocation();
      geolocation.getCurrentPosition(
        function (r) {
          if (this.getStatus() == 200) {
            var mk = new window.BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            // alert('您的位置：'+r.point.lng+','+r.point.lat);
          } else {
            // alert('failed'+this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    },
  },
  created() {
    //只获取对应的详情页
    //该处问题：若获取数据的时候用到两个 . 的话，比如：houseInfo.baseInfo.a
    //这时候就会报错，我们需要在data(){}里面，在houseInfo中手动定义一个空对象baseInfo：{}
    // 或者在父标签中加个 v-if=“父标签”
    getBestHouse("/data/house_data.json").then((res) => {
      let data = res.data;
      if (data.code == 200) {
        this.bestHouseAll = data.bestHouse;
        var params = this.$route.params;
        this.houseInfo = this.bestHouseAll.find(
          (item) => item.hid == params.hid
        );
      } else {
        return "error";
      }
    });
    window.scrollTo(0, 0);
  },
  mounted() {
    this.map();
  },
  components: {},
};
</script>
<style src="../assets/css/homedetails.css" scoped></style>
<style scoped>
.container {
  position: relative;
  z-index: 9;
}
</style>
